<template>
    <van-action-sheet
        v-model:show="visible"
        @cancel="clickCancel"
    >
        <van-picker
            title="选择银行"
            :columns="columns"
            @cancel="clickCancel"
            @confirm="clickConfirm"
        />
        <van-field
            v-model="inputValue"
            placeholder="找不到银行？请输入"
            clearable
            @clear="inputValue = ''"
        />
    </van-action-sheet>
</template>

<script setup>
    import bankNames from './list'
    import { ref, computed } from 'vue'

    const emits = defineEmits(['confirm'])

    const bankNamesColumns = ref(bankNames)
    const visible = ref(false)
    const inputValue = ref('')

    const columns = computed(() => {
        if (inputValue.value) {
            return [{ text: inputValue.value, value: inputValue.value }]
        }
        return bankNamesColumns.value.map(item => ({ text: item, value: item }))
    })

    const clickCancel = () => {
        visible.value = false
    }
    const clickConfirm = ({ selectedValues }) => {
        emits('confirm', selectedValues[0])
        clickCancel()
    }

    defineExpose({
        init () {
            visible.value = true
            inputValue.value = ''
        }
    })
</script>

<style scoped lang="less"></style>